<template>
	<view>
		<image class="bg" :src="appImgs.bg_1" mode="aspectFill"></image>
		<view class="login">
			<view class="item">
				<button type="primary" form-type="submit" @click="tapGetUserProfile">一键登录</button>
			</view>
		</view>
		<cui-userprofiledialog ref="userProfileDialog" paddingBottom="92rpx"></cui-userprofiledialog>
	</view>
</template>

<script>
import {
	login,
	getUserInfo,
	getUserJb,
	updataUser
} from "@/api/user/index.js";
import store from "@/store/index.js";
export default {
	data() {
		return {
			appImgs: {}
		}
	},
	onLoad() {
		this.appImgs = uni.$hl.getAppImgs();
	},
	onShow() {
		this.signSrc = getApp().globalData.signSrc;
	},
	methods: {
		tapGetUserProfile() {
			if (uni.getStorageSync("avatarUrl") && uni.getStorageSync("nickName")) {
				this.toLogin()
			} else {
				this.$refs["userProfileDialog"].show({
					desc: "用于显示个人资料",
					avatarUrl: {
						requried: true, // 是否必填
						disable: false, // 是否隐藏
					},
					nickName: {
						requried: true, // 是否必填
						disable: false, // 是否隐藏
					}
				}).then(res => {
					uni.setStorageSync('avatarUrl', res.avatarUrl);
					uni.setStorageSync('nickName', res.nickName);
					this.toLogin()
				}, err => {
					console.log("取消")
				});
			}

		},
		toLogin() {
			uni.login({
				provider: "weixin",
				onlyAuthorize: true,
				success: (re) => {
					var postData = {
						clientId: "d445a0db7cb73f2ecd24da4812aced41",
						grantType: "xcx",
						tenantId: "000000",
						xcxCode: re.code,
					};
					var useData = {
						avatar: uni.getStorageSync("avatarUrl"),
						nickName: uni.getStorageSync("nickName"),
						sex: "1",
					};
					login(postData).then((res) => {
						uni.$hl.showLoading("自动登录中");
						if (res.data.code == 200) {
							store.commit("setToken", res.data.data.access_token);
							uni.setStorageSync(
								"token",
								res.data.data.access_token
							);
							store.commit("setClientId", res.data.data.client_id);
							uni.setStorageSync(
								"clientId",
								res.data.data.client_id
							);
							updataUser(useData).then((res) => {
								if (res.data.code == 200) {
									var getData = {
										tenantId: "000000",
										clientId: uni.getStorageSync("clientId"),
									};
									getUserInfo(getData).then((res) => {
										if (res.data.code == 200) {
											this.userInfo = res.data.data.user;
											uni.hideLoading();
											getUserJb().then((res) => {
												this.userInfo.gold = res.data.data.money;
												this.userInfo.pass = res.data.data.pass;
												this.userInfo.sign = res.data.data.sign;
												uni.$hl.setUserInfo(this.userInfo);
												uni.setStorageSync("userInfo", this.userInfo)
												uni.$hl.showToast("登录成功", "success");
												uni.navigateTo({
													url: "/pages/index/index",
												});
											});
										} else {
											uni.hideLoading();
											uni.$hl.showToast("登录失败，请重试");
										}
									});
								}
							})

						} else {
							uni.hideLoading();
							uni.$hl.showToast("登录失败，请重试");
						}
					});
				},
				fail: (err) => {
					uni.hideLoading();
					console.log(err);
					uni.showToast({
						title: "微信登录授权失败",
						icon: "none",
					});
				},
			});
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
	font-size: 28rpx;
	color: #333;
}

.login {
	display: block;
	background-color: rgba(255, 255, 255, 0.6);
	padding: 30rpx;
	position: absolute;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
	top: 40%;
	left: 0;

	.item {
		padding: 10rpx 0;

		input {
			height: 90rpx;
			display: block;
			width: 100%;
			font-size: 28rpx;
			letter-spacing: 1px;
		}

		&+.item {
			border-top: #eee solid 1px;
		}
	}
}

.bg {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.box {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: var(--status-bar-height);
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	margin-left: 10rpx;
	box-sizing: border-box;
	border: 2rpx #ccc dashed;
}
</style>
